<template>
	<div class="shopDetail">
		<!-- banner -->
		<img class="topImg" :src="'http://www.zhenlvw.com/'+banner.img_original" alt="">
		<!-- 产品名称盒子 -->
		<div class="shopName_box">
			<p class="shopName">{{goods.goods_name}}</p>
			<div class="shop_Name_Num">
				<span class="l">{{goods.goods_brief}}</span>
				<span class="r">已售<span class="goods_num">{{goods.virtual_sales}}</span>笔</span>
			</div>

			<div class="shopPrice">
				<span class="price_yuan">
					￥<big>18</big>.8
				</span>
				<span class="price_jian">￥18.8</span>
			</div>

			<div class="card">
				<span class="boder_green">250g*1盒</span>
				<span>250g*1盒</span>
				<span>250g*1盒</span>
				<span>250g*1盒</span>
			</div>
		</div>
		<!-- 分享盒子 -->
		<div class="share_box">
			<img src="../assets/img/share.png" alt="">
			<div class="special">
				—— &#160;&#160;&#160;&#160;&#160;&#160; 购买该商品可获得15积分 &#160;&#160;&#160;&#160;&#160;&#160;  ——
			</div>
		</div>
		<!-- 产品追溯 -->
		<div class="shopZhui">
			<img src="../assets/img/zhuisu.png" alt="">
		</div>
		<!-- 产品评价 -->
			<div class="userPing">
				<div class="topPing">
					<span>菜谱评价(123)</span>
					<div class="topPing_end">
						<span>好评度</span>
						<span>100%</span>
						<img :src="'http://www.zhenlvw.com/'+banner.img_original" alt="">
					</div>
				</div>
				<!-- <div class="item_P" v-for="item in pingjia" >
					<div class="item_P_top">
						<img :src="'http://www.zhenlvw.com/'+banner.img_original" alt="">
						<span class="userName">
							{{item.user_name}}
						</span>
						<img :src="'http://www.zhenlvw.com/'+banner.img_original" alt="">
					</div>
					<div class="yanyu">
						{{item.content}}
					</div>
				</div> -->
			</div>
		<!-- 珍绿推荐 -->
			<div class="tuijian_box">
				<p>珍 绿 推 荐</p>
				<div class="listAll">
					<div class="list">
						1.采用有机种植的方式。
					</div>
					<div class="list">2.果农每日清晨采摘，确保新鲜直达，确保蔬菜水分、营养不流失，保持蔬菜口感。
					</div>
					<div class="list">3.蔬菜特色：脆嫩爽口、水分充足，可凉拌生食。
					</div>
				</div>
			</div>

<!-- shop Detail -->
		<div class="shopDetails_box">
			<p class="topla" > 
				<img src="../assets/img/upsan.png">
				上拉查看图文详情
			</p>

			<div class="detail_box">
				<p class="title">商品信息</p>
				<div id="detail">
					
				</div>
			</div>
		</div>

<!-- 服务指导 -->
	<div class="fuzhidao">
		<p class="title">服务指导</p>

		<div class="zhiA">
			<div class="zhiT">如何辨别有机蔬菜和普通蔬菜</div>
			<div class="zhiC">随着人民生活水平的提高，人们对食物的要求也越来越高，所需…</div>
		</div>

		<div class="zhiA">
			<div class="zhiT">如何辨别有机蔬菜和普通蔬菜</div>
			<div class="zhiC">随着人民生活水平的提高，人们对食物的要求也越来越高，所需…</div>
		</div>

		<div class="zhiA">
			<div class="zhiT">如何辨别有机蔬菜和普通蔬菜</div>
			<div class="zhiC">随着人民生活水平的提高，人们对食物的要求也越来越高，所需…</div>
		</div>
	</div>


<!-- 会员尊享 -->
		<div class="huiyuan_box">
			<p class="title">会员尊享</p>

			<div class="hA">
				<div class="hT">
					<img src="../assets/img/people.png" alt="">
					专家指导
				</div>
				<div class="hB">扫码加入服务群，珍绿营养专家给您科学指导</div>
			</div>

			<div class="hA">
				<div class="hT">
					<img src="../assets/img/yiyang.png" alt="">
					专家指导
				</div>
				<div class="hB">扫码加入服务群，珍绿营养专家给您科学指导</div>
			</div>

			<div class="hA">
				<div class="hT">
					<img src="../assets/img/jidi.png" alt="">
					专家指导
				</div>
				<div class="hB">扫码加入服务群，珍绿营养专家给您科学指导</div>
			</div>
		</div>

<!-- bottom -->
		<div class="bottomNav">
			<div class="lineBox">
				<div class="item_line">
					<img src="../assets/img/shop.png" alt="">
					<div class="center_bottom">首页</div>
				</div>
				<div class="item_line">
					<img src="../assets/img/kefu.png" alt="">
					<div class="center_bottom">客服</div>
				</div>
				<div class="item_line">
					<img src="../assets/img/car.png" alt="">
					<div class="center_bottom">购物车</div>
				</div>
			</div>
			<div class="car">加入购物车</div>
		</div>

	</div>
</template>

<script> 
export default {
	name: 'shopDetail',
	data () {
		return {
			msg: 'shopDetail',
			'banner':{},
			'goods':{}
		}
	},
	created(){
		// function getUrlParam(name) {
	 //        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	 //        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
	 //        console.log(window.location)
	 //        if (r != null) return unescape(r[2]); return null; //返回参数值
	 //    }

	    function getUrlParam(name) {
	        var canname = name
	        var json = {}
	        var href = location.hash
	        var hrefUrl = href.split('?')
	        console.log(hrefUrl[1])
	        if(hrefUrl[1].indexOf('&') > 0){
	          //有 & 
	          var hrefArr = hrefUrl[1].split('&')
	          console.log(hrefArr)
	          for (var i = 0; i < hrefArr.length; i++) {
	            var hrefAllArr = hrefArr[i].split('=')
	            json[hrefAllArr[0]] = hrefAllArr[1]
	            return json[canname]
	          }
	        }else{
	          //没有& 
	          var hrefUrlarr = hrefUrl[1].split('=')
	          json[hrefUrlarr[0]] = hrefUrlarr[1]
	          console.log(canname)
	          console.log(json)
	          return json[canname]
	        }
	      }


		let goods_id  = getUrlParam('goods_id')
		console.log(goods_id)
		this.axios.post('http://api-wei.zhenlvw.com/v2/shiji.api.fxproduct',{'goods_id':goods_id })
		.then((res)=>{
			console.log(res.data.data)
			this.banner = res.data.data.banner
			this.goods = res.data.data.goods
			this.tianHtml(this.goods.goods_desc)
			
		})
		.catch((err)=>{
			console.log(err);
		})
		$("title").html("shopDetail");
	}, 
	methods:{
		tianHtml(html1){
			$('#detail').html(html1)
			$('#detail img').css({'width':'100%'})
	      console.log(thtml1)
	    }
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.shopDetail{
		padding:0rem 0rem 1rem 0rem;
	}
/*banner*/
	.topImg{
		width: 100%;
		height: 7.75rem;
		border-radius: 
	}
/*产品名称盒子*/
	.shopName_box{
		width: 100%;
		border-bottom: 0.16rem solid #EEEEEE;
	}
	.shopName_box .shopName{
		width: 100% - 0.29rem;
		padding:0.2rem 0rem 0.23rem 0.29rem;
		font-size:0.36rem;
		font-family:PingFangSC;
		color:#000;
	}
	.shopName_box .shop_Name_Num{
		width: 100%-0.6rem;
		padding:0rem 0.3rem;
		display: flex;
		justify-content: space-between;
	}
	.shopName_box .shop_Name_Num .l{
		font-size:0.28rem;
		font-family:PingFangSC;
		color:rgba(144,144,146,1);
	}
	.shopName_box .shop_Name_Num .r{
		font-size:0.28rem;
		font-family:PingFangSC;
		color:rgba(144,144,146,1);
	}
	.shopName_box .shop_Name_Num .goods_num{
		color:#FB775E;
	}
	.shopName_box .shopPrice{
		width: 100%-0.6rem;
		padding:0.24rem 0.3rem 0.3rem;
	}
	.shopName_box .price_yuan{
		color:#2C7B8C;
		margin-right: 0.1rem;
	}
	.shopName_box  .price_jian{
		color:#595959;
		text-decoration:line-through;
	}
	.shopName_box  .card{
		width: 100%-0.6rem;
		padding:0.28rem 0.3rem;
		display: flex;
		justify-content: space-between;
	}
	.shopName_box  .card  span{
		width: 1.6rem;
		height: 0.6rem;
		border:1px solid #101010;
		color:#101010;
		text-align: center;
		line-height: 0.6rem;
		font-family:PingFangSC;
		font-size:0.28rem;
	}
	.shopName_box  .card  .boder_green{
		border:1px solid #2C7B8C;
		color:#2C7B8C;
	}
/* 分享盒子 */
	.share_box{
		padding:0.2rem 0rem;
		border-bottom: 0.16rem solid #EEEEEE;
	}
	.share_box img{
		width: 100%;
		height: 1rem;
	}
	.special{
		width: 100%;
		text-align: center;
		font-size:0.24rem;
		font-family:PingFang-SC-Medium;
		color:rgba(89,89,89,1);
	}
/* 追溯 */
	.shopZhui{
		padding:0.2rem 0rem;
		border-bottom: 0.16rem solid #EEEEEE;
	}
	.shopZhui img{
		width: 100%;
		height: 2.8rem;
	}
/*菜谱评价（123）*/
	.userPing{
	  width: 7rem;
	  margin-left: 0.31rem;
	  padding-bottom: 0.4rem;
	  border-bottom: 1px solid #D2D2D2;
	}
	.topPing{
	  display: flex;
	  justify-content: space-between;
	  margin-top: 0.4rem;
	}
	.topPing>span:nth-child(1){
	  font-size:0.32rem;
	  font-family:PingFangSC;
	  color:rgba(250,130,108,1);
	}
	.topPing_end{
	  width:2rem;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.topPing_end span:nth-child(1){
	  font-size:0.28rem;
	  font-family:PingFangSC;
	  color:#595959;
	}
	.topPing_end span:nth-child(2){
	  font-size:0.28rem;
	  font-family:PingFangSC;
	  color:#FB775E;
	}
	.topPing_end img{
	  width: 0.15rem;
	  height: 0.26rem;
	}
	.item_P{}
	.item_P_top{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  margin: 0.3rem 0rem;
	}

	.item_P_top img:nth-child(1){
	  width: 0.6rem;
	  height: 0.6rem;
	  border-radius: 50%;
	  margin-right: 0.10rem;
	}

	.item_P_top img:nth-child(3){
	  width: 1rem;
	  height: 0.3rem;
	}

	.userName{
	  flex:1;
	  font-size:0.24rem;
	  font-family:PingFangSC;
	  color:rgba(16,16,16,1);
	}

	.yanyu{
	  font-size:0.24rem;
	  font-family:PingFangSC;
	  color:rgba(17,17,17,1);
	  margin-bottom: 0.30rem;
	}

	.tuijian_box{
		padding: 0.27rem 0.3rem;
		border-bottom: 0.16rem solid #EEEEEE;
	}
	.tuijian_box p{
		font-size:0.30rem;
		font-family:PingFangSC;
		color:rgba(44,123,140,1);
		text-align: center;
		letter-spacing: 0.1rem;
	}
	.listAll{

	}
	.list{
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(16,16,16,1);
		line-height:0.36rem;
	}

/*商品信息*/
	.shopDetails_box{
		width: 100%;
		border-bottom: 0.16rem solid #EEEEEE;
	}
	.shopDetails_box .topla{
		width: 100%;
		text-align: center;
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(89,89,89,1);
		text-align: center;
		padding: 0.2rem 0rem;
	}
	.shopDetails_box .topla img{
		width: 0.26rem;
		height: 0.15rem;
		margin-right: 0.1rem;
	}
	.shopDetails_box .detail_box{
		width:100%
	}
	.shopDetails_box .title{
		width: 100%;
		text-align: center;
		font-size:0.24rem;
		font-family:PingFangSC;
		color:#2C7B8C;
		text-align: center;
		padding: 0.2rem 0rem;
	}
	.shopDetails_box  #detail{
		width: 100%;
	}
	.shopDetails_box  #detail p{
		width: 100%;
	}

/*服务指导*/
	
	.fuzhidao{
		padding:0.2rem 0rem;
		border-bottom: 0.16rem solid #EEEEEE;
	}
	.fuzhidao .title{
		width: 100%;
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(44,123,140,1);
		text-align: center;
	}
	.zhiA{
		width: 100%;
		text-align: center;
		margin-top:0.3rem;
	}
	.zhiT{
		font-size:0.30rem;
		font-family:PingFangSC;
		color:rgba(16,16,16,1);
		margin-bottom: 0.20rem;
	}
	.zhiC{
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(89,89,89,1);
	}

/*会员尊享*/

	.huiyuan_box{
		padding:0.2rem 0rem;
	}
	.huiyuan_box .title{
		width: 100%;
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(44,123,140,1);
		text-align: center;
	}

	.hA{
		width: 100%;
		text-align: center;
		margin-top:0.3rem;
	}
	.hT{
		font-size:0.30rem;
		font-family:PingFangSC;
		color:rgba(16,16,16,1);
		margin-bottom: 0.20rem;
	}
	.hT img{
		width: 0.3rem;
		height: 0.28rem;
		margin-right: 0.2rem;
	}
	.hB{
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(89,89,89,1);
	}



/*bottom*/
	.bottomNav{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 0.97rem;
		display: flex;
		justify-content: space-between;
		background: #fff;
	}
	.lineBox{
		flex:1;
		display: flex;
		justify-content: space-between;
	}
	.item_line{
		flex:1;
		border-right: 1px solid #DBD9D9;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding:0.1rem 0rem;
	}
	.item_line img{
		width: 0.38rem;
		height: 0.36rem;
		display: block;
	}
	.center_bottom{
		width: 100%;
		text-align: center;
		font-size:0.26rem;
		font-family:PingFangSC;
		color:rgba(115,113,113,1);
	}
	.car{
		width: 2.94rem;
		text-align: center;
		line-height: 0.97rem;
		font-size:0.32rem;
		font-family:PingFangSC;
		color:#FFFFFF;
		background: #FA826C;
	}
</style>
